<template>
    <div>
        <!-- 顶部区域 -->
        <div class="category-list">
            <van-tag
                type="primary"
                v-for="item in categoryList"
                :key="item.id"
                @click="onClickGetPhotoListByCategoryId(item.id)"
            >
                {{ item.title }}
            </van-tag>
        </div>
        <!-- 图片列表区域 -->
        <ul class="photo-list">
            <router-link
                v-for="item in photoList"
                :key="item.id"
                :to="{ name: 'photo_show', params: { id: item.id } }"
                tag="li"
            >
                <!-- 使用图片懒加载 -->
                <van-image lazy-load :src="`${APIDomainName}${item.img}`">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                </van-image>

                <div class="info">
                    <h1 class="info-title van-ellipsis">{{ item.title }}</h1>
                    <div class="info-body van-multi-ellipsis--l3">
                        {{ item.summary }}
                    </div>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
//懒加载
import Vue from "vue";
import {Lazyload } from "vant";
Vue.use(Lazyload);

import { Tag, Image, Loading,Dialog} from "vant";
import {
    getPhotoCategory,
    getPhotoListByCategoryId,
} from "@/api/photo.js";

export default {
    components: {
        [Tag.name]: Tag,
        [Image.name]: Image,
        [Loading.name]: Loading,
    },
    data() {
        return {
            categoryList: [], // 所有分类的列表数组
            photoList: [], // 图片列表的数组
            categoryId: 0,
        };
    },

    created() {
        // 调用方法
        this.getAllCategory();
        this.onClickGetPhotoListByCategoryId(0);
    },
    methods: {
        // 获取图片的分类
        async getAllCategory() {
            try {
                let result = await getPhotoCategory();
                if (result.code === 1) {
                    this.categoryList = result.data;
                } else throw result.msg;
            } catch (error) {
                Dialog.alert({ title: "错误", message: error });
            }
        }, //==============================================
        async onClickGetPhotoListByCategoryId(categoryId) {
            // console.log(categoryId)
            this.categoryId = categoryId;
            // 根据分类Id,获取图片列表
            try {
                let result = await getPhotoListByCategoryId({
                    category_id: categoryId,
                });
                // console.log(result)
                if (result.code == 1) {
                    this.photoList = result.data;
                    if (this.photoList.length == 0) {
                        this.$toast("没有记录数据");
                    }
                } else throw result.msg;
            } catch (error) {
                Dialog.alert({ title: "错误", message: error });
            }
        }, //==============================================
    },
};
</script>

<style lang="less" scoped>
.category-list {
    font-size: 13px;
    margin: 10px;
}
.van-tag {
    margin: 2px;
}
.photo-list {
    list-style: none;
    margin: 0;
    padding-bottom: 10px;
    li {
        background-color: #ccc;
        text-align: center;
        margin: 10px;
        box-shadow: 0 0 9px #999;
        position: relative;
        .van-image {
            width: 100%;
            vertical-align: middle;
        }
        .info {
            padding-left: 5px;
            padding-right: 5px;
            color: white;
            text-align: left;
            position: absolute;
            bottom: 10px;
            background-color: rgba(0, 0, 0, 0.4);
            max-height: 84px;
            .info-title {
                font-size: 14px;
            }
            .info-body {
                font-size: 13px;
            }
        }
    }
}
</style>

